<template>
  <static-container>
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="closeDetail">佣金概况</el-breadcrumb-item>
            <el-breadcrumb-item :key="2">会员概况</el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="sub-title">
        时间：{{filters.date[0] | toDate}}
        <template v-if="info.isDuration">
          - {{filters.date[1] | toDate}}
        </template>
      </template>
      <template slot="right">
        <el-button
          size="medium"
          @click="closeDetail"> 返回
        </el-button>
      </template>
    </static-container-header>
    <static-container-body>
      <custom-container class="sub-member">
        <custom-container-header>
          <custom-button-group
            class="man-account-list__nav"
            v-model="filters.type">
            <custom-button :label="0">
              累计会员数<template v-if="total[0]">（{{total[0]}}）</template>
            </custom-button>
            <!--<custom-button :label="1">-->
              <!--新会员<template v-if="total[1]">（{{total[1]}}）</template>-->
            <!--</custom-button>-->
            <custom-button :label="2">
              活跃会员<template v-if="total[2]">（{{total[2]}}）</template>
            </custom-button>
            <custom-button :label="3">
              待活跃会员<template v-if="total[3]">（{{total[3]}}）</template>
            </custom-button>
            <custom-button :label="4">
              有效会员<template v-if="total[4]">（{{total[4]}}）</template>
            </custom-button>
            <custom-button :label="5">
              登录会员<template v-if="total[5]">（{{total[5]}}）</template>
            </custom-button>
          </custom-button-group>
          <custom-button-group v-model="time">
            <custom-button v-for="period in periods" :key="period.value" :label="period.value">
              {{period.title}}
            </custom-button>
          </custom-button-group>
        </custom-container-header>
        <custom-container-body>
          <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
                    :summary-method="getSummaries"
                    :local-summary-method="getLocalSummaries"
                    show-summary
                    show-local-summary
                    @sort-change="sortChange"
          >
            <el-table-column
              align="center"
              width="170px"
              label="注册时间">
              <template slot-scope="{row}">
                {{row.registerTime}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="会员账户">
              <template slot-scope="{row}">
                <div class="sub-member__username-column">
                  {{row.userName}}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="rechargeAmount"
              sortable="custom"
              align="center"
              label="存款金额">
              <template slot-scope="{row}">
                {{row.rechargeAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="withdrawAmount"
              sortable="custom"
              align="center"
              label="提款金额">
              <template slot-scope="{row}">
                {{row.withdrawAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="betEffectAmount"
              sortable="custom"
              align="center"
              label="有效投注额"
            >
              <template slot-scope="{row}">
                {{row.betEffectAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="bettingAmount"
              sortable="custom"
              align="center"
              label="投注总额"
            >
              <template slot-scope="{row}">
                {{row.bettingAmount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              prop="bettingWin"
              sortable="custom"
              align="center"
              label="公司输赢"
            >
              <template slot-scope="{row}">
                <money-text  :negate="true" :value="row.bettingWin"></money-text>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="操作"
              width="180"
            >
              <template slot-scope="{row}">
                <el-button
                  type="link"
                  size="small"
                  @click="openDetail(row)"
                >
                  查看详情
                </el-button>
                <el-button
                  type="link"
                  size="small"
                  v-if="isCreditUp"
                  @click="openCreditUp(row)"
                >
                  上分
                </el-button>
              </template>
            </el-table-column>

            <template slot="empty">
              <div class="el-table__empty">
                <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
                <div class="el-table-text">暂无数据</div>
              </div>
            </template>
          </el-table>
          <div class="el-pagination-container">
            <el-pagination
              bordered
              @size-change="gridSizeChange" @current-change="gridCurrentChange"
              :current-page="filters.page" :page-size="filters.size"
              :total="Number(tableData.total)">
            </el-pagination>
            <el-warning>红色负数代表会员盈利，绿色正数代表公司盈利</el-warning>
          </div>
        </custom-container-body>
      </custom-container>
    </static-container-body>
  </static-container>
</template>

<script type="text/jsx">

  import {memberByTimeApi as getApi} from '@/services/api/home';

  import {grid, pickerOption} from '@/build';

  export default {
    name: 'member-detail',

    mixins: [grid, pickerOption],

    inject: ['closeDetail'],

    props: {
      info: Object
    },

    data() {
      let date = [];
      if (this.info.type === 2) {
        date = _.toTimestamp(
          {start: [0, 'month'], end: [0, 'day'], startEnd: true}
        );
      } else {
        date = _.toTimestamp(
            {start: [0, 'day'], end: [0, 'day'], startEnd: true}
          );
      }

      return {
        filters: {
          date,
          order: undefined,
          sort: undefined,
          type: 0,
          page: undefined,
          size: 10
        },
        currentRow: undefined,
        tableData: {
          list: [],
          total: 0
        },
        total: [],
        statistic: [
          {
            index: 2,
            prop: 'tableData.sum.rechargeAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            },
          },
          {
            index: 3,
            prop: 'tableData.sum.withdrawAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 4,
            prop: 'tableData.sum.betEffectAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 5,
            prop: 'tableData.sum.bettingAmount',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 6,
            prop: 'tableData.sum.bettingWin',
            format: (value) => {
              return <money-text  negate={true} value={value}></money-text>;
            }
          },
        ],
	      periods: _.filter(consts.TIME_PERIOD, (period) => {
		      return _.indexOf([consts.THIS_MONTH, consts.LAST_MONTH], period.value) !== -1;
	      }),
        time:5,
      }
    },

    watch: {
      'filters.type'() {
        this.getAll();
      }
    },

    methods: {
      openDetail(row) {
        this.$memberDetail({
          info: {
            username: row.userName,
            id: row.uid,
            filters: this.filters,
          },
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      },
      openCreditUp(row) {
        this.$creditUp({
          info: {
            username: row.userName,
            id: row.uid,
          },
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      }
    },

    computed: {
      ...mapGetters([
        'isCreditUp'
      ]),
      ...mapState({
        creditStatus: state => state.creditStatus
      }),
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        afterSuccess: ([result, data]) => {
          this.total[this.filters.type] = data.total;
        }
      });

      // this.getAll();

      this.$store.dispatch(types.GET_CREDIT_STATUS);
    }
  }
</script>
<style lang="scss" scoped>
  .custom-container-header{
    justify-content: space-between;
  }
</style>